<template>
  <div class="exom">
    <Header />
    <van-tabs v-model="active" class="tabs" title-active-color="#6ae0f0" color="#6ae0f0" sticky>
      <van-tab title="周榜">
        <bdlist class="bookshow" v-for="(item,index) in Hwlbone5" :key="index" :item="item" />
        <nomore />
      </van-tab>
      <van-tab title="月榜">
        <bdlist class="bookshow" v-for="(item,index) in Hwlbone6" :key="index" :item="item" />
        <nomore />
      </van-tab>
      <van-tab title="总榜">
        <bdlist class="bookshow" v-for="(item,index) in Hwlbone7" :key="index" :item="item" />
        <nomore />
      </van-tab>
    </van-tabs>
    <foot />
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import foot from "@/components/foot.vue";
import Header from "@/components/Header.vue";
import bookshow from "@/components/bookshow.vue";
import debookshow from "@/components/debookshow.vue";
import bdlist from "@/components/bdlist.vue";
import nomore from "@/components/nomore.vue";

export default {
  name: "Home",
  components: {
    foot,
    Header,
    bookshow,
    debookshow,
    bdlist,
    nomore,
  },
  data() {
    return {
      active: "",
      Hwlbone5: [
        // {
        //   pic: "bimg/hr4.jpg",
        //   ather: "流浪的猴",
        //   title: "重生之战神吕布",
        //    zj:'第5811章 贵霜形势',
        //   main:' 我是吕布？三国第一武将？为了改变命运，吕布开始了他的抗争；诸侯讨董，我也是诸侯；大草原，那是我的养马场；貂蝉，谁敢和我抢？骂我？有你求我的时候；打我？俺的三千飞骑，天下何处去不得。',
        //   state:"连载",
        //   category:'穿越小说',
        //   score:'8.2'
        // },
        // {
        //   pic: "bimg/hr5.jpg",
        //   ather: "佚名",
        //   title: "史上最狂老祖",
        //    zj:'第三千六百一十二章 一切恩怨',
        //   main:'万年前，混世大魔王林天在人界成为无敌传说。万年后，林天修重回故里。曾经他创建的第一大宗已经成了不入流门派，而徒弟们又下落不明，最可恶的是徒孙们被人欺压。一怒之下，林天一手撕天，一脚跺地，让无数仙神陪葬！',
        //   state:"连载",
        //   category:'玄幻小说',
        //   score:'7.2'
        // },
        // {
        //   pic: "bimg/hr6.jpg",
        //   ather: "九公主留步",
        //   title: "快穿之逆袭男神方案",
        //    zj:'第六百一十六章',
        //   main:'这是一本男神详细攻略手册。',
        //   state:"连载",
        //   category:'穿越小说',
        //   score:'9.4'
        // },
        // {
        //   pic: "bimg/hr19.jpg",
        //   ather: "步兵长",
        //   title: "重生之文娱高手",
        //   zj:'第八十四章 知晓',
        //   main:' .此书连载中（阅读全本小说）',
        //   state:"连载",
        //   category:'都市小说',
        //   score:'9.6'
        // },
        // {
        //   pic: "bimg/hr20.jpg",
        //   ather: "乱世狂刀",
        //   title: "圣武星辰",
        //   zj:'关于番外',
        //   main:' 事情是这样的，2017年夏天，在太阳系之外，位于紫薇星域的几大超级武道宗门，要修筑一座史无前例的大型传送阵法，以方便他们对于银河系南部星域的开发，而这座阵法的仙力脉冲正好要经过地球，所以，地球要被强拆了。 朴实无华的黑色古戒，古怪神经的魔修女，犹抱琵琶半遮面的撑伞人，神秘莫测的菊花脸，水火不容的道修与魔修，变幻莫测的真气江湖，横空降临的高级异域，一一在陆峥面前撕开面纱。 且看一代天师如何在异界从零开始，书写峥嵘！',
        //   state:"完结",
        //   category:'玄幻小说',
        //   score:'7.2'
        // },
      ],
      Hwlbone6: [
        {
          pic: "hr7.jpg",
          ather: "临河羡鱼翁动作",
          title: "我真的在打篮球",
          zj: "第一百二十六章",
          main:
            "我是一个准备留学的普通留美留学生，正准备努力学习天天向上，留学归来建设美丽祖国！可是，踏上美利坚的那一刻，一切都不一样了……你拿起了篮球！你走进了球场！你在球场的山呼海啸中‘迷路’了，头脑一片空白！……我本来是一个未来制霸21世纪的生物工程师，现在，我居然拿起了篮球……看着手上的篮球，我沉默了片刻。我，真的在打篮球！",
          state: "连载",
          category: "动作小说",
          score: "8.2",
        },
        {
          pic: "hr8.jpg",
          ather: "黑暗荔枝动",
          title: "女友不可能是怪物",
          zj: "第二百五十四章 极限黑暗动 ",
          main:
            "女友都不是人！已完本《我的女友是丧尸》《我的末世基地车》新书请大家继续多多支持！《我的女友是丧尸》改编漫画《我的守护女友》在腾讯动漫，哔哩哔哩漫画可看。",
          state: "连载",
          category: "科幻小说",
          score: "8.6",
        },
        {
          pic: "hr9.jpg",
          ather: "绝不咸鱼",
          title: "亏成首富从游戏开始",
          zj: "第一千二百二十一章",
          main:
            "腾达集团目前估值已达千亿级别，业务涉及游戏、互联网、数码硬件、文化传媒、餐饮等多个领域，深刻地改变了人们生活的方方面面。而裴谦，也被视为“绝世好老板”、“不世出的投资奇才”、“天才游戏制作人”，拥有“无为而治的管理才能”和“对行业风向的精确洞察力”。面对记者，裴谦大吐苦水。“我真不是什么商业奇才啊！”“我的成功，完完全全都是运气使然！”“我最初的目标，只是想亏光五万块而已……”",
          state: "连载",
          category: "网游小说",
          score: "8.6",
        },
        {
          pic: "hr10.jpg",
          ather: "卖报小郎君动",
          title: "大奉打更人",
          zj: "第二百一十六章真正的强敌",
          main: "我本观天下，满是英雄豪杰。我再观天下，皆为乌合之众。 ",
          state: "连载",
          category: "穿越小说",
          score: "9.2",
        },
        {
          pic: "hr11.jpg",
          ather: "知白类",
          title: "不让江山",
          zj: "第七百三十四章",
          main: "我本观天下，满是英雄豪杰。我再观天下，皆为乌合之众。",
          state: "连载",
          category: "都市小说",
          score: "8.9",
        },
      ],
      Hwlbone7: [
        {
          pic: "hr12.jpg",
          ather: "云千帆苏晴动",
          title: "盖世战王",
          zj: "第一千零二十一章",
          main:
            "一代战神出狱归来，却发现女儿身受重病，老婆竟然在陪别的男人喝酒...... ",
          state: "连载",
          category: "玄幻小说",
          score: "7.4",
        },
        {
          pic: "hr13.jpg",
          ather: "鱼人二代",
          title: "校花的贴身高手",
          zj: "第九千一百八十一章",
          main:
            " 传奇杀手回归都市，奉旨保护校花！我是校花的贴身高手，你们最好离我远一点，不然大小姐又要吃醋了！",
          state: "连载",
          category: "都市小说",
          score: "8.8",
        },
        {
          pic: "hr14.jpg",
          ather: "快穿狂魔类 ",
          title: "快穿之养老攻略",
          zj: "第两千三百四十八章",
          main:
            " 他是《幸存者》里第一指挥（lyb)作为一个资深任务者，乔木实在厌烦了勾心斗角，以及跟男女主之间的感情纠扯了，于是积分一够，立刻向上级申请了养老。管理局一想，那感情好，正好这边有一堆养老任务没人接呢。索性，就把那堆养老任务打包免费送给了乔木。于是，乔木就开始了真养老日子！",
          state: "连载",
          category: "科幻小说",
          score: "9.2",
        },
        {
          pic: "hr15.jpg",
          ather: "为了达拉然状 ",
          title: "我能看见决赛圈",
          zj: "第二百一十六章真正的强敌",
          main:
            " 他是《幸存者》里第一指挥（lyb)，凭借一手独门机关术战胜各路强队，但排位却只定到了青铜。他也曾创下《幸存者》移动步数最少记录的玩家，也是因为他，游戏被迫改变设定。丁温：只要不动就能赢，我为什么要动",
          state: "连载",
          category: "都市小说",
          score: "9.3",
        },
      ],
    };
  },
  methods: {
    changeStyle(index) {
      this.active = index; //实现第一种效果只需要这句代码  实现第二种效果就要加上外面的判断条件
    },
  },
  mounted() {
    // 热更
    if (this.$route.query.id == 3) {
      this.$axios.get("/api/Searchping").then((data) => {
        var image = data.data;
        // console.log(data.data);
        // console.log(image)
        // image.forEach((item) => {
        //   item.pic = "bimg/" + item.pic;
        // });
        this.Hwlbone5 = image;
        // console.log(this.Hwlbone5);
      });
    }else if(this.$route.query.id==4){
      this.$axios.get("/api/Searchhot").then((data) => {
        var image = data.data.data;
        // console.log(data.data);
        // console.log(image)
        // image.forEach((item) => {
        //   item.pic = "bimg/" + item.pic;
        // });
        this.Hwlbone5 = image;
        // console.log(this.Hwlbone5);
      });
    }else if(this.$route.query.id.length>2){
       this.$axios.post("/api/classification", { search: this.$route.query.id }).then((data) => {
        console.log(data);
        // if (data.data.code == 200) {
        //   alert(data.data.msg);
        // }
        // data.data.data.forEach((item) => {
        //   item.pic = "bimg/" + item.pic;
        // });
        console.log(data.data.data);
        this.Hwlbone5 = data.data.data;
        console.log(this.showbook);
      });
    }else if(this.$route.query.id==2){
      this.$axios.get("/api/Searchlast").then((data) => {
        var image = data.data.data;
        // console.log(data.data);
        // console.log(image)
        // image.forEach((item) => {
        //   item.pic = "bimg/" + item.pic;
        // });
        this.Hwlbone5 = image;
        // console.log(this.Hwlbone5);
      });
    }else{
      console.log('object')
    }
    
  },
};
</script>

<style  scoped>
/* .booknone {
  position: relative;
  top: 1.25rem;
  height: 18rem;
  width: 100%;
  background: url('bimg/bookbj.jpg');
  background-size: 100% 100%;
} */
.Bookshelf img {
  height: 6rem;
  margin-left: 10%;
}
.botto {
  height: 1.2rem;
  width: 100%;
  color: #9d9d9d;
  text-align: center;
  line-height: 1.2rem;
  font-size: 0.5rem;
}
.bslast {
  position: relative;
  top: 3rem;
  display: flex;
  text-align: center;
  line-height: 2rem;
  justify-content: space-around;
}
.gold {
  width: 40%;
  height: 2rem;
  color: #a1fd0e;
  font-size: 0.6rem;
}
.Jade {
  width: 40%;
  height: 2rem;
  color: #f8b2e3;
  font-size: 0.6rem;
}

.tabs {
  position: relative;
  top: 1.25rem;
}
</style>